<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>区域查询</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css">
</head>
<body>
    <div class="container-fluid">
		<div class="row-fluid">
		<form class="layui-form">
			<div class="layui-row">
				<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
					<label class="layui-form-label">所属区域:</label>
					<div class="layui-input-block">
						<select id="areaId" name="areaId">
							<option value="0" selected="selected"></option>
							<c:forEach items="${areaDicDataArr}" var="areaDicData">
					        	<option value="${areaDicData.dicDataValue}">${areaDicData.dicDataName}</option>
					        </c:forEach>
						</select>
					</div>
			    </div>
			    <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
    				<label class="layui-form-label">开始时间:</label>
    				<div class="layui-input-block">
				      <input type="text" id="startDate" name="startDate" placeholder="开始日期" autocomplete="off" class="layui-input">
				    </div>
				</div>
				<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
    				<label class="layui-form-label">-</label>
    				<div class="layui-input-block">
						<input type="text" id="endDate" name="endDate" placeholder="结束日期" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
    				<button id="query_btn" type="button" class="layui-btn layui-btn-normal">查询</button>
    				<button class="layui-btn layui-btn-warm" type="reset" >重置</button>
				</div>
				<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
    				<button id="export_btn" class="layui-btn layui-btn-normal">导出</button>
				</div>
    		</div>
    		</form>
			<div class="span12">
				<table id="financeTable" lay-filter="financeTable"></table>
				
			</div>
		</div>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/layui/layui.all.js"></script>
<script>
var ctx = "${pageContext.request.contextPath}";
var areaDicDatas = eval('${areaDicDatas}');
function getDicVal(value,list){
	for(var i=0;i<list.length;i++){
		if(list[i].dicDataValue==value){
			return list[i].dicDataName;
		}
	}
	return "";
}

function openLay(areaId){
	var startDate=$("#startDate").val();
	var endDate=$("#endDate").val();
	layer.open({
	  type: 2,
	  shade: false,
	  area: ['800px', '300px'],
	  maxmin: true,
	  content: ctx+"/dataAnalyze/goToDetails?areaId="+areaId+"&startDate="+startDate+"&endDate="+endDate,
	  zIndex: layer.zIndex, //重点1
	  success: function(layero){
	    layer.setTop(layero); //重点2
	  }
	}); 
}


$(function(){
	var laydate = layui.laydate;
	var laytable = layui.table;
	var layer = layui.layer;
	
	$("#export_btn").on("click",function(){
		window.location.href=ctx+"/exportByAreaId?areaId="+$("#areaId").val()+"&startDate="+$("#startDate").val()+"&endDate="+$("#endDate").val()
	});
	
	//执行一个laydate实例
	laydate.render({
		elem: '#startDate', //指定元素
		format: 'yyyyMMdd' //可任意组合
	});
	
	laydate.render({
		elem: '#endDate', //指定元素
		format: 'yyyyMMdd' //可任意组合
	});
	
	
	var tableIns = laytable.render({
	    elem: '#financeTable'
	    ,url: ctx+'/dataAnalyze/findByArea' //数据接口
	    ,height:350
	    ,where: {
	    	areaId: $("#areaId").val(), 
	    	startDate: $("#startDate").val(),
	    	endDate: $("#endDate").val(),
	    }//参数
	    ,page: true //开启分页
	    ,cols: [[ //表头
	    	{field: 'dicDataName', title: '区域',templet: function(d){
		          return d.dicDataName;
		      }  }
		      ,{field: 'carTims', title: '车次',templet: function(d){
		          return d.carTims;
		      } } 
		      ,{field: 'weights', title: '重量',templet: function(d){
		          return d.weights;
		      } }
	      ,{field: 'unit', title: '操作',templet: function(d){
	          return "<button type='button' class='layui-btn layui-btn-sm layui-btn-normal' onClick='openLay("+d.dicDataValue+")'>详情</button>";
	      } }
	    ]]
	  });
	$("#query_btn").on("click",function(){
		tableIns.reload({
		  where: { //设定异步数据接口的额外参数，任意设
			areaId: $("#areaId").val(), 
	    	startDate: $("#startDate").val(),
	    	endDate: $("#endDate").val(),
		  }
		  ,page: {
		    curr: 1 //重新从第 1 页开始
		  }
		});
	});
	
});


</script>
</html>